<template>
    <div class="animal-list">
      
      <van-nav-bar title="动物介绍">
        <van-search
          v-model="keyword"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </van-nav-bar>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-grid column-num="2" gutter="10">
          <van-grid-item v-for="(item, index) in animals" :key="index">
            <!-- 添加一个 @like 事件，用来监听子组件的自定义事件 -->
            <animal-card
              :name="item.name"
              :image="item.image"
              :description="item.description"
              :category="item.category"
              @like="onLike"
            />
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </template>
  
  <script>
  import axios from "axios";
import AnimalCard from "../components/AnimalCard.vue";
  
  export default {
    name: "AnimalList",
    components: {
      AnimalCard,
    },
    data() {
      return {
        keyword: "",
        animals: [],
        loading: false,
        finished: false,
        page: 1,
        size: 10,
      };
    },
    methods: {
      onSearch() {
        // 搜索逻辑，可以根据关键词过滤动物数据或者调用后端接口
        console.log("搜索", this.keyword);
      },
      onCancel() {
        // 取消搜索逻辑，可以恢复原始的动物数据或者清空搜索框
        console.log("取消");
      },
      onLoad() {
        // 加载更多逻辑，可以从本地或者后端获取更多的动物数据，并更新列表
        console.log("加载更多");
        this.loading = true;
        // 模拟异步请求
        setTimeout(() => {
          // 模拟获取猫咪数据
          axios
            .get("https://api.thecatapi.com/v1/images/search", {
              params: { limit: this.size, page: this.page },
            })
            .then((res) => {
              const data = res.data;
              // 将猫咪数据转换为统一的格式
              const cats = data.map((item) => ({
                name: item.breeds[0]?.name || "未知品种",
                image: item.url,
                description:
                  item.breeds[0]?.description ||
                  "这是一只可爱的猫咪，它有着柔软的毛发和明亮的眼睛。",
                category: ["猫科", "哺乳类"],
              }));
              // 更新动物列表
              this.animals = [...this.animals, ...cats];
              // 更新页码
              this.page++;
              // 判断是否加载完毕
              if (this.animals.length >= 50) {
                this.finished = true;
              } else {
                this.loading = false;
              }
            })
            .catch((err) => {
              console.error(err);
            });
          // 模拟获取狗狗数据
          axios
            .get("https://dog.ceo/api/breeds/image/random/" + this.size)
            .then((res) => {
              const data = res.data.message;
              // 将狗狗数据转换为统一的格式
              const dogs = data.map((item) => ({
                name: item.split("/")[4] || "未知品种",
                image: item,
                description:
                  "这是一只忠诚的狗狗，它有着强壮的身体和敏捷的动作。",
                category: ["犬科", "哺乳类"],
              }));
              // 更新动物列表
              this.animals = [...this.animals, ...dogs];
              // 更新页码
              this.page++;
              // 判断是否加载完毕
              if (this.animals.length >= 50) {
                this.finished = true;
              } else {
                this.loading = false;
              }
            })
            .catch((err) => {
              console.error(err);
            });
        }, 1000);
      },
      // 定义一个方法，用来处理子组件的自定义事件
      onLike(name) {
        // 打印出喜欢的动物名称，并更新本地存储或者后端接口
        console.log("喜欢", name);
      },
    },
  };
  </script>
  
  <style scoped>
  .animal-list {
    height: 100%;
  }
  </style>
  